<template>
  <div class="like">
    <div class="like-top">
      <img src="https://i.52112.com/icon/jpg/256/20210112/106718/4567503.jpg">
      猜你喜欢
    </div>
    <ul>
      <li class="like-item border-bottom" @click="toDetails" v-for="item in likeList" :key="item.id">
        <div class="like-img">
          <img :src="item.imgUrl">
        </div>

        <div class="like-text">
          <div class="like-title">{{ item.title }}</div>
          <div class="like-massage">{{ item.message }}</div>
          <div class="like-map">
            <span class="like-mark">￥<b>{{ item.pre }}</b></span>起
            <span class="like-map-item">{{ item.map }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "like",
  props:['likeList'],
  methods:{
    toDetails(){
      this.$router.push('/detail')
    }
  }
}
</script>

<style scoped>
  .like{
    margin-top: .3rem;
    background: #fff;
    font-size: .28rem;
    padding: 0 .2rem;
  }
  .like-top{
    font-size: .32rem;
    padding: .2rem 0;
  }
  .like-top img{
    width: .3rem;
    height: .3rem;
  }
  .like-item{
    position: relative;
    padding: .2rem 0;
    overflow: hidden;
  }
  .like-img{
    float: left;
  }
  .like-img img{
    width: 2rem;
    height: 2rem;
  }
  .like-text{
    overflow: hidden;
    padding-left: .22rem;
  }
  .like-title{
    font-size: .36rem;
    color: #212121;
    margin-top: .4rem;
  }
  .like-massage{
    margin-top: .3rem;
    color: #616161;
    font-size: .24rem;
  }
  .like-map{
    margin-top: .3rem;
    color: #616161;
    position: relative;
  }
  .like-mark{
    color: #ff8300;
  }
  .like-mark b{
    font-size: .40rem;
  }
  .like-map-item{
    position: absolute;
    right: 0;
    top: .1rem;
    font-size: .24rem;
  }
</style>
